<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form v-loading="formLoading" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
    <el-form-item label="类型" prop="type">
      <el-radio-group v-model="dataForm.type">
          <el-radio :label="0">目录</el-radio>
          <el-radio :label="1">内容</el-radio>
      </el-radio-group>    
    </el-form-item>
    <el-form-item label="上级目录" prop="menuId" v-if="dataForm.id!=1">
        <el-popover 
          ref="menuListPopover"
          placement="bottom-start"
          trigger="click">
          <el-tree
            :data="menuList"
            :props="menuListTreeProps"
            node-key="id"
            ref="menuListTree"
            @current-change="menuListTreeCurrentChangeHandle"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="false">
          </el-tree>
        </el-popover>
      <el-input v-model="dataForm.menuName" v-popover:menuListPopover :readonly="true" placeholder="点击选择部门" class="menu-list__input"></el-input>
    </el-form-item>
    <el-form-item label="所属基地" prop="deptId">
       <el-input v-model="dataForm.deptName" v-popover:deptListPopover readonly="true" placeholder="所属基地"></el-input>
        <el-popover ref="deptListPopover" placement="bottom-start" trigger="click">
          <el-tree
            ref="deptListTree" node-key="id" 
            show-checkbox
            :data="deptList" 
            :props="deptListTreeProps"
            @check-change="checkChange"
            :check-strictly="true" 
            :default-expand-all="true"
            :highlight-current="true" 
            :expand-on-click-node="false"
          >
          </el-tree>
      </el-popover>
    </el-form-item>
    <el-form-item label="知识库名称" prop="name">
      <el-input v-model="dataForm.name" placeholder="知识库名称"></el-input>
    </el-form-item>
    <el-form-item label="知识库文件" prop="filePath" v-if="dataForm.type==1">
      <div >
         <multipleFileUpload ref="multipleFileUploadRef"></multipleFileUpload>
        <!--<el-input v-model="dataForm.filePath" placeholder="知识库文件"></el-input>-->
      </div>   
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button v-loading="formLoading" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import multipleFileUpload from '@/components/multiple-flie-upload/index'
 import { treeDataTranslate } from '@/utils'
  export default {
    components: {
      multipleFileUpload
    },
    data () {
      return {
        visible: false,
        formLoading: false,
        reportLayer:false,
        dataForm: {
          id: 0,
          deptId: '',
          deptName:'',
          type: 0,
          name: '',
          filePath: '',
          menuId: '',
          menuName:'',
          fileName: ''
        },
        deptList: [],
        deptListTreeProps: {
          label: 'name',
          children: 'children',
          disabled: function(data, node){
            return data.type == 1 ? false :true
          }
        }, 
        menuList: [],
        menuListTreeProps: {
          label: 'name',
          children: 'children'
        },
        dataRule: {
          deptId: [
            { required: true, message: '所属部门不能为空', trigger: 'change' }
          ],
          type: [
            { required: true, message: '类型不能为空', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '知识库名称不能为空', trigger: 'blur' }
          ],
          // filePath: [
          //   { required: true, message: '知识库文件不能为空', trigger: 'change' }
          // ],
          menuId: [
            { required: true, message: '上级目录不能为空', trigger: 'change' }
          ],
        }
      }
    },
    methods: {
      init (id,menuId) {
        this.getMenuAll()
        this.dataForm.id = id || 0
        this.$http({
          url: this.$http.adornUrl('/sys/dept/select2'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.deptList = treeDataTranslate(data.deptList, 'id')
        }).then(() => {
        this.visible = true
        this.formLoading = false
        this.$nextTick(() => {
          this.deptListTreeSetCurrentNode1(menuId)
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/buss/bussknowledgebase/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.deptId = data.bussKnowledgeBase.deptId
                this.dataForm.type = data.bussKnowledgeBase.type
                this.dataForm.name = data.bussKnowledgeBase.name
                this.dataForm.filePath = data.bussKnowledgeBase.filePath
                this.dataForm.createName = data.bussKnowledgeBase.createName
                this.dataForm.createTime = data.bussKnowledgeBase.createTime
                this.dataForm.menuId = data.bussKnowledgeBase.menuId
                this.dataForm.fileName = data.bussKnowledgeBase.fileName
                this.dataForm.version = data.bussKnowledgeBase.version
                this.deptListTreeSetCurrentNode()
                this.deptListTreeSetCurrentNode1(this.dataForm.menuId)
              }
            })
          }
        })
      })    
      },
      // 菜单树设置当前选中节点
      deptListTreeSetCurrentNode () {
        this.$refs.deptListTree.setChecked(this.dataForm.deptId,true,false)
        this.dataForm.deptName = (this.$refs.deptListTree.getCheckedNodes() || [])[0].name
      },
        // 菜单树设置当前选中节点
      deptListTreeSetCurrentNode1 (menuId) {
        this.$refs.menuListTree.setCurrentKey(menuId)
        this.dataForm.menuName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
      },
       // 节点修改
      checkChange(data, checked, node){
          if(checked == true){// 选中部门
              this.checkedId = data.id;
              this.$refs.deptListTree.setCheckedNodes([data])
              this.dataForm.deptId = data.id
              this.dataForm.deptName = data.name
          }
      },
      //菜单树
      menuListTreeCurrentChangeHandle (data, node) {
        this.dataForm.menuId = data.id
        this.dataForm.menuName = data.name
      },
      // 表单提交
      dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
          if (valid && !this.formLoading) {
            this.formLoading = true

            var uploadFileIds = this.$cookie.get('uploadFileIds')
              this.$http({
              url: this.$http.adornUrl(`/buss/bussknowledgebase/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'deptId': this.dataForm.deptId,
                'type': this.dataForm.type,
                'name': this.dataForm.name,
                'filePath': this.$cookie.get('uploadFileIds'),
                'menuId': this.dataForm.menuId,
                'version': this.dataForm.version,
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$emit('refreshDataList')
                    }
                  })
                  // 请求完成后 删除上传的id
                  this.$refs['multipleFileUploadRef'].clearHistory()
                } else {
                  this.formLoading = false
                  this.$message.error(data.msg)
                }
              })
          }
         })
      },
      getMenuAll(){
          this.$http({
            url: this.$http.adornUrl('/buss/bussknowledgebase/getAll'),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
             this.menuList = treeDataTranslate(data, 'id','menuId')
          })    	     	       	
      },
    }
  }
</script>
